<template>
  <div v-loading="isReady" :class="showWrap ? 'gl_contentBox gl_heightFull' : ''">
    <div v-if="showWrap" class="choose_version">请选择您需要的版本</div>
    <div v-if="pageList.length" class="version_wrap">
      <div class="version_list">
        <div v-for="item in pageList" :key="item.id" class="version_item">
          <versionItem :modules="modulesList" :version="item" />
        </div>
      </div>
    </div>
    <div v-else class="version_wrap">
      <div class="no_version ta_c">
        暂无可购买的道馆版本 <el-link v-if="isInHall" class="vertical_t" type="primary" @click="jumpToBackstage">返回后台</el-link>
      </div>
    </div>

    <form id="form" ref="form" action="https://unipay.ydfuture.com/api/v1/trade/cashDesk" method="post" style="display:none">
      <input ref="pay_params" type="text" name="pay_params" value="">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { mapState } from 'vuex';

import versionItem from './versionItem.vue';

import {
  api_GET_Edition, // 获取版本
  api_GET_EditionModules // 获取所有模块列表
} from '@/extend/api/swaggerApi/identity.js';

import {
  api_POST_ClubEditionOrderSubmitEditionEditionId
} from '@/extend/api/hallswaggerApi/app.js';

import {
  api_GET_TradePayOrderParameter // 获取支付订单的参数
} from '@/extend/api/swaggerApi/app';

import {
  Api_GET_TradePayOrderParameterQO
} from '@/lib/form/swaggerForm';

export default {
  components: {
    versionItem
  },
  props: {
    showWrap: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      modulesList: [],
      pageList: [],
      pageListLoading: true,
      modulesListLoading: true,
      buyLoading: false,
      orderParameterQO: new Api_GET_TradePayOrderParameterQO()
    };
  },
  computed: {
    ...mapState({
      tenantId: state => state.user.tenantId
    }),
    isReady () {
      return (this.pageListLoading && this.modulesListLoading) || this.buyLoading;
    },
    isInHall () {
      const _route = this.$route;
      console.log(_route);
      return true;
    }
  },
  created () {
    // 获取功能模块列表
    this.getModuleList();
    // 获取页面数据
    this.getPageList();
  },
  methods: {
    // 获取所有模块列表
    getModuleList () {
      this.modulesListLoading = true;
      api_GET_EditionModules()
        .then(
          res => {
            this.modulesListLoading = false;
            const _list = res || [];
            _list.sort((a, b) => a.sortOrder - b.sortOrder);
            this.modulesList = _list;
            console.log(this.modulesList, '模块列表');
          }
        )
        .catch(
          error => {
            this.modulesListLoading = false;
            this.$message({
              message: `模块列表获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 获取页面列表
    getPageList () {
      this.apiGetSysVersion({
        IsEnabled: true, // true | false
        IncludeValidityType: true, // true | false
        IncludeEditionModules: true
      });
    },
    // 页面列表API
    apiGetSysVersion (_qo) {
      this.pageListLoading = true;
      api_GET_Edition(_qo)
        .then(
          res => {
            this.pageListLoading = false;
            let _list = res || [];
            _list = _list.filter(item => {
              if (!item.isDeleted) {
                item._editionModules = {};
                for (let j = 0; j < item.editionModules.length; j++) {
                  const jtem = item.editionModules[j];
                  item._editionModules[jtem.moduleId] = jtem;
                }
              }
              return !item.isDeleted;
            });
            this.pageList = _list;
          }
        )
        .catch(
          error => {
            this.pageListLoading = false;
            console.log(error);
          }
        );
    },
    buyVersion (data) {
      this.apiClubEditionOrderSubmitEditionEditionId(data.id);
    },
    apiClubEditionOrderSubmitEditionEditionId(id) {
      this.buyLoading = true;
      api_POST_ClubEditionOrderSubmitEditionEditionId(id)
        .then(
          res => {
            this.buyLoading = false;
            this.payment(res.orderNo);
          }
        )
        .catch(
          error => {
            this.buyLoading = false;
            this.$message({
              message: `购买失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 去支付
    payment(orderNo) {
      if (orderNo) {
        const _origin = window.location.origin;
        const _pathname = window.location.pathname;
        // 后台购买道馆版本与道馆选择页购买道馆返回地址不一样
        const _orderUrl = `#/t__${this.tenantId || ''}${this.showWrap ? '/order/orderSearch' : ''}`;
        const url = _origin + _pathname + _orderUrl;
        this.orderParameterQO.OrderNo = orderNo;
        this.orderParameterQO.ReturnUrl = url; // 支付成功后跳转的地址
        api_GET_TradePayOrderParameter(this.orderParameterQO)
          .then(res => {
            this.$refs.pay_params.value = res.parameter.replace(/\s*/g, '');
            this.$refs.form.submit();
          });
      }
    },
    jumpToBackstage () {
      window.location.href = `${window.location.origin}/#/t__${this.tenantId}`;
    }
  }
};
</script>

<style lang="scss" scoped>
  .choose_version {
    font-size: 16px;
    font-weight: 500;
    line-height: 60px;
    color: rgba(0, 0, 0, 0.85);
  }
  .version_wrap {
    padding: 20px 40px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 10px 36px 0px rgba(0, 0, 0, 0.08);
  }
  .function_label {
    width: 160px;
  }
  .version_list {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding-bottom: 15px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar{
      width: 8px;
      height: 8px;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb{
      border-radius: 12px;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
      background-color: rgba(144, 147, 153, 0.3);
    }
  }
  .version_item {
    margin-right: 30px;
  }
  .version_item:last-child {
    margin-right: 0px;
  }
  .title {
    padding: 27px 0;
    height: 84px;
    font-size: 28px;
    font-weight: 500;
    color: #000;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
  }
  .subTitle {
    position: relative;
    height: 22px;
    margin-bottom: 15px;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    line-height: 22px;
  }
  .subTitle_pl {
    padding-left: 36px;
  }
  .subTitle.dot {
    font-size: 14px;
    color: #6a7eec;
    margin-left: 17px;
  }
  .subTitle.dot::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: -17px;
    width: 7px;
    height: 7px;
    color: #6a7eec;
    margin-top: -3px;
    background-color: #6A7EEC;
    border-radius: 50%;
  }
  .hr_boder {
    margin-bottom: 25px;
    border-bottom: 1px solid #3E7FEA;
  }
  .icon_a-duigou {
    color: #00B628;
  }
  .subTitle.desc {
    height: 44px;
    box-sizing: border-box;
    padding: 0 35px;
    font-size: 14px;
    text-align: center;
    white-space: normal;
  }
  .title_desc {
    height: 44px;
  }
  .subTitle.time {
    font-size: 22px;
    color: #CB3100;
  }
  .price {
    height: 38px;
    margin-bottom: 40px;
    font-size: 38px;
    font-weight: 400;
    text-align: left;
    color: #333333;
    line-height: 38px;
  }
  .buy {
    margin-bottom: 45px;
  }
  .ta_c {
    text-align: center;
  }

  .no_version {
    padding: 50px 0;
    font-size: 14px;
    color: #5e6d82;
  }

  .vertical_t {
    vertical-align: top;
  }
</style>
